唯品秀前端博客
当前位置: 前端开发 > 移动端开发 >

uniapp中web-view页面H5与App跨平台双向通信

作者：管理员 2022-09-09 11:36:56 分类：移动端开发 阅读（3068） 0

一、概要

  • uniapp打包成的小程序、app，在某些场景下需要访问第三方或其他上线的h5页面，并要实现交互通信，一般就是h5页面点击某个按钮，需要通知应用做出下一步的操作。
  • 注意：根据官方文档提供的例子，APP、微信小程序、H5都没问题，但是百度小程序必须添加业务域名通信功能才能生效。
  • 下面的代码还实现了应用向h5页面即时通讯，关键词:‘#’。
  • h5中获取小程序或父级传递的参数参考该文章的第三点：【web-view加载h5】小程序中web-view加载uni-app H5如何使用postMessage方法的解决方案

二、uniapp页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
    <view>
        <web-view src="http://lp.demo.com/" @message="handleMessage"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            handleMessage(evt) {
                console.log('接收到的消息：' ,evt.detail.data[0].action);
                uni.showModal({
                    content:JSON.stringify(evt.detail.data)
                })
                if(evt.detail.data[0].action=='back'){
                    uni.navigateBack({
                        delta:1
                    })
                }
            }
        }
    }
</script>

<style>

</style>

三、h5页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网络网页</title>
    <style type="text/css">
        .btn {
            display: block;
            margin: 20px auto;
            padding: 5px;
            background-color: #007aff;
            border: 0;
            color: #ffffff;
            height: 40px;
            width: 200px;
        }

        .btn-red {
            background-color: #dd524d;
        }

        .btn-yellow {
            background-color: #f0ad4e;
        }

        .desc {
            padding: 10px;
            color: #999999;
        }

        .post-message-section {
            visibility: hidden;
        }
    </style>
</head>

<body>
    <p class="desc">web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。</p>
    <div class="btn-list">
        <button class="btn" type="button" data-action="navigateTo">navigateTo</button>
        <button class="btn" type="button" data-action="redirectTo">redirectTo</button>
        <button class="btn" type="button" data-action="navigateBack">navigateBack</button>
        <button class="btn" type="button" data-action="reLaunch">reLaunch</button>
        <button class="btn" type="button" data-action="switchTab">switchTab</button>
    </div>
    <div class="post-message-section">
        <p class="desc">网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。</p>
        <div class="btn-list">
            <button class="btn btn-red" type="button" id="postMessage">postMessage</button>
        </div>
    </div>
    <script type="text/javascript">
        var userAgent = navigator.userAgent;
        if (userAgent.indexOf('AlipayClient') > -1) {
            // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
            document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
        } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
            // QQ 小程序
            document.write(
                '<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
            );
        } else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
            // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
            document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
        } else if (/toutiaomicroapp/i.test(userAgent)) {
            // 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
            document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
        } else if (/swan/i.test(userAgent)) {
            // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
            document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.22.js"><\/script>');
        } else if (/quickapp/i.test(userAgent)) {
            // quickapp
            document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
        }
        if (!/toutiaomicroapp/i.test(userAgent)) {
            document.querySelector('.post-message-section').style.visibility = 'visible';
        }
    </script>
    <script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.22.js"></script>
    <!-- uni 的 SDK -->
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <script type="text/javascript">
        // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
        document.addEventListener('UniAppJSBridgeReady', function () {
            uni.postMessage({
                data: {
                    action: 'message'
                }
            });
            uni.getEnv(function (res) {
                console.log('当前环境：' + JSON.stringify(res));
            });

            document.querySelector('.btn-list').addEventListener('click', function (evt) {
                var target = evt.target;
                if (target.tagName === 'BUTTON') {
                    var action = target.getAttribute('data-action');
                    switch (action) {
                        case 'switchTab':
                            uni.switchTab({
                                url: '/pages/index/index'
                            });
                            break;
                        case 'reLaunch':
                            uni.reLaunch({
                                url: '/pages/index/index'
                            });
                            break;
                        case 'navigateBack':
                            uni.navigateBack({
                                delta: 1
                            });
                            break;
                        case 'navigateTo':
                            uni.navigateTo({
                                url: '/pages/center/center'
                            });
                            break;
                        case 'redirectTo':
                            uni.redirectTo({
                                url: '/pages/center/center'
                            });
                            break;
                        default:
                            uni[action]({
                                url: '/pages/index/index'
                            });
                            break;
                    }
                }
            });
            document.getElementById('postMessage').addEventListener('click', function () {
                console.log('通信消息', uni)
                uni.postMessage({
                    data: {
                        action: 'back'
                    }
                });
            });
        });
    </script>
</body>
</html>

四、uniapp向webview中实时通信

其中之一就是小程序不能向内置的webview实时传参，因为只能通过url地址首次传递数过去。官方不开放接口看起来无可奈何。

但是世上无难事儿，只怕有心人，作为一个合格的程序员就应该是一个有心人。不废话：诀窍就是通过url地址传递参数给webview。但是问题来了，动态的参数会使webview重新加载页面，页面一刷新，一切都白搭。但是的但是，小程序也有漏洞，千防万防就是防不住我呀，url地址不是有“锚”连接吗（“#”），对，就是这个符号。在url地址里面添加这个符号，后面紧跟动态参数，比如：http://p.vr100.com/index.php?m=bbs#1,这样webview地址就不会重新加载，参数1也过去了，然后在h5页面里面获取url地址，完美解决！

H5中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script type="text/javascript">
    var getUrlData = {
        callback: null,
        _t: 0,
        init(fn) {
            this.callback = fn;
            this.bind();
            this.change.call(this);
        },
        bind() {
            let that = this;
            if (("onhashchange" in window) && ((typeof document.documentMode === "undefined") || document.documentMode == 8)) {
                window.onhashchange = () => {
                    that.change.call(that);
                };
            } else {
                clearInterval(this._t);
                this._t = setInterval(() => {
                    that.change.call(that);
                }, 150);
            }
        },
        change() {
            let that = this,
                _hash = window.location.hash,
                _data = null;
            try {
                _data = JSON.parse(decodeURIComponent(_hash.split('#')[1]));
            } catch (e) {
                _data = decodeURIComponent(_hash.split('#')[1]);
            }
            if (that.callback) that.callback({
                type: that.getQuery('type'),
                data: _data
            });
        },
        getQuery(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            let r = decodeURIComponent(window.location.search).substr(1).match(reg);
            if (r != null) {
                // 对参数值进行解码
                return decodeURIComponent(r[2]);
            }
            return null;
        }
    }
</script>

使用

1
2
3
getUrlData.init(function(res){
    console.log(res);//返回的格式例如 {type: 'myType', data: 1}
})
本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(31) 打赏
标签：

上一篇：

下一篇：

相关推荐

共 0 条评论关于"uniapp中web-view页面H5与App跨平台双向通信"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏